import Spinner from "@lib/Spinner";
import Table, { type TableColumnProps } from "@lib/Table";
import { formatDate, SubTotal } from "@lib/Table/utils";
import type { RouteDefinition } from "@solidjs/router";
import { createSignal } from "solid-js";

const datas = [
  { id: 1, name: "Jack", time: "0001-01-01T00:00:00+00:00" },
  { id: 2, name: "Jack" },
  { id: 3, name: "Jack" },
  { id: 4, name: "Jack" },
  { id: 5, name: "Jack" },
  { id: 6, name: "Jack" },
  { id: 7, name: "Jack" },
  { id: 8, name: "Jack" },
  { id: 9, name: "Jack" },
  { id: 10, name: "Jack" },
  { id: 11, name: "Jack" },
  { id: 1, name: "Jack" },
  { id: 2, name: "Jack" },
  { id: 3, name: "Jack" },
  { id: 4, name: "Jack" },
  { id: 5, name: "Jack" },
  { id: 6, name: "Jack" },
  { id: 7, name: "Jack" },
  { id: 8, name: "Jack" },
  { id: 9, name: "Jack" },
  { id: 10, name: "Jack" },
  { id: 11, name: "Jack" },
  { id: 1, name: "Jack" },
  { id: 2, name: "Jack" },
  { id: 3, name: "Jack" },
  { id: 4, name: "Jack" },
  { id: 5, name: "Jack" },
  { id: 6, name: "Jack" },
  { id: 7, name: "Jack" },
  { id: 8, name: "Jack" },
  { id: 9, name: "Jack" },
  { id: 10, name: "Jack" },
  { id: 11, name: "Jack" },
  { id: 1, name: "Jack" },
  { id: 2, name: "Jack" },
  { id: 3, name: "Jack" },
  { id: 4, name: "Jack" },
  { id: 5, name: "Jack" },
  { id: 6, name: "Jack" },
  { id: 7, name: "Jack" },
  { id: 8, name: "Jack" },
  { id: 9, name: "Jack" },
  { id: 10, name: "Jack" },
  { id: 11, name: "Jack" },
  { id: 1, name: "Jack" },
  { id: 2, name: "Jack" },
  { id: 3, name: "Jack" },
  { id: 4, name: "Jack" },
  { id: 5, name: "Jack" },
  { id: 6, name: "Jack" },
  { id: 7, name: "Jack" },
  { id: 8, name: "Jack" },
  { id: 9, name: "Jack" },
  { id: 10, name: "Jack" },
  { id: 11, name: "Jack" },
  { id: 1, name: "Jack" },
  { id: 2, name: "Jack" },
  { id: 3, name: "Jack" },
  { id: 4, name: "Jack" },
  { id: 5, name: "Jack" },
  { id: 6, name: "Jack" },
  { id: 7, name: "Jack" },
  { id: 8, name: "Jack" },
  { id: 9, name: "Jack" },
  { id: 10, name: "Jack" },
  { id: 11, name: "Jack" },
  { id: 1, name: "Jack" },
  { id: 2, name: "Jack" },
  { id: 3, name: "Jack" },
  { id: 4, name: "Jack" },
  { id: 5, name: "Jack" },
  { id: 6, name: "Jack" },
  { id: 7, name: "Jack" },
  { id: 8, name: "Jack" },
  { id: 9, name: "Jack" },
  { id: 10, name: "Jack" },
  { id: 11, name: "Jack" },
  { id: 1, name: "Jack" },
  { id: 2, name: "Jack" },
  { id: 3, name: "Jack" },
  { id: 4, name: "Jack" },
  { id: 5, name: "Jack" },
  { id: 6, name: "Jack" },
  { id: 7, name: "Jack" },
  { id: 8, name: "Jack" },
  { id: 9, name: "Jack" },
  { id: 10, name: "Jack" },
  { id: 11, name: "Jack" },
  { id: 1, name: "Jack" },
  { id: 2, name: "Jack" },
  { id: 3, name: "Jack" },
  { id: 4, name: "Jack" },
  { id: 5, name: "Jack" },
  { id: 6, name: "Jack" },
  { id: 7, name: "Jack" },
  { id: 8, name: "Jack" },
  { id: 9, name: "Jack" },
  { id: 10, name: "Jack" },
  { id: 11, name: "Jack" },
  { id: 1, name: "Jack" },
  { id: 2, name: "Jack" },
  { id: 3, name: "Jack" },
  { id: 4, name: "Jack" },
  { id: 5, name: "Jack" },
  { id: 6, name: "Jack" },
  { id: 7, name: "Jack" },
  { id: 8, name: "Jack" },
  { id: 9, name: "Jack" },
  { id: 10, name: "Jack" },
  { id: 11, name: "Jack" },
  { id: 1, name: "Jack" },
  { id: 2, name: "Jack" },
  { id: 3, name: "Jack" },
  { id: 4, name: "Jack" },
  { id: 5, name: "Jack" },
  { id: 6, name: "Jack" },
  { id: 7, name: "Jack" },
  { id: 8, name: "Jack" },
  { id: 9, name: "Jack" },
  { id: 10, name: "Jack" },
  { id: 11, name: "Jack" },
];

const columns: TableColumnProps<any>[] = [
  { type: "selection", style: { width: "1rem" } },
  { type: "index", style: { width: "1rem" } },
  { name: "id", label: "Id" },
  { name: "name", label: "Name" },
  {
    label: "mixin",
    children: (d, i) => (
      <span>
        {d.id} + {d.name}
      </span>
    ),
  },
];

const TableDemo = () => {
  const [tableLoading, setTableLoading] = createSignal(true);
  const toggleTableLoading = () => setTableLoading((v) => !v);

  const [tableLoading2, setTableLoading2] = createSignal(true);
  const toggleTableLoading2 = () => setTableLoading2((v) => !v);

  return (
    <div>
      <Table style={{ height: '500px', width: '500px' }} responsive fixedHeader columns={columns}>

      </Table>
      <Table
        responsive
        style={{ height: "200px" }}
        fixedHeader
        columns={[
          { type: "selection", style: { width: "1rem" } },
          { type: "index", style: { width: "1rem" } },
          { name: "id", label: "Id" },
          { name: "name", label: "Name" },
          { name: "time", children: formatDate() },
          {
            label: "mixin",
            children: (d, col, i) => (
              <span>
                {d.id} + {d.name}
              </span>
            ),
          },
        ]}
        datas={datas}
      ></Table>
      <hr />
      <Table
        responsive
        style={{ height: "200px" }}
        columns={columns}
        datas={datas}
      ></Table>
      <hr></hr>
      <div>
        <Table
          groupDivider
          style={{ height: "500px" }}
          // responsive
          fixedHeader
          caption="Flex-Grow"
          border="bordered"
          columns={columns}
          datas={datas}
        ></Table>
      </div>
      <hr></hr>
      <button type="button" class="btn btn-light" onClick={toggleTableLoading2}>
        Toggle
      </button>
      <Table
        captionTop
        // caption={"List of User"}
        slots={{
          body: (ctx) => (
            <Table.Body
              {...ctx}
              classList={{
                ...ctx.classList,
                "table-light": true,
                "table-group-divider": true,
              }}
            ></Table.Body>
          ),
          header: (ctx) => (
            <Table.Header
              {...ctx}
              classList={{
                ...ctx.classList,
                "table-dark": true,
              }}
            ></Table.Header>
          ),
          // caption: (ctx) => (
          //   <Table.Caption {...ctx} style={{ "background-color": "lightgray" }}>
          //     <div class="caption-content ps-2">New List Of User</div>
          //     <div
          //       class="pe-2 float-right"
          //       style={{
          //         position: "sticky",
          //         right: 0,
          //         display: "inline-block",
          //       }}
          //     >
          //       tools
          //     </div>
          //   </Table.Caption>
          // ),
        }}
        loading={tableLoading2()}
        // border="bordered"
        hover
        responsive
        // rowKey={"__index__"}
        nowrap
        fixedHeader
        style={{ height: "500px", width: "800px" }}
        columns={[
          { type: "selection", style: { "background-color": "lightblue" } },
          {
            type: "index",
            width: 64,
            headerAlign: "end",
            align: "end",
            style: { "background-color": "lightgray" },
          },
          {
            name: "id",
            label: "Id",
            fixed: "left",
            width: 64,
            footer: SubTotal,
          },
          { name: "name", label: "Name" },
          {
            label: "mixin",
            children: (d, i) => (
              <span>
                {d.id} + {d.name}
              </span>
            ),
          },
          {
            label: "mixin-left",
            children: (d, i) => (
              <span>
                left {d.id} + {d.name}
              </span>
            ),
          },
          {
            style: { width: "5rem" },
            name: "",
            label: "test 1",
            children: (d, i) => "1",
            // fixed: "left",
          },
          {
            style: { width: "5rem" },
            name: "",
            label: "test 2",
            children: (d, i) => "2",
          },
          {
            style: { width: "5rem" },
            name: "",
            label: "test 3",
            children: (d, i) => "3",
          },
          {
            style: { width: "5rem" },
            name: "",
            label: "test 4",
            children: (d, i) => "4",
          },
          {
            style: { width: "5rem" },
            name: "",
            label: "test 5",
            children: (d, i) => "5",
          },
          {
            style: { width: "5rem" },
            name: "",
            label: "test 6",
            children: (d, i) => "6",
          },
          {
            style: { width: "5rem" },
            name: "",
            label: "test 7",
            children: (d, i) => "7",
          },
          {
            style: { width: "5rem" },
            name: "",
            label: "test 8",
            children: (d, i) => "8",
          },
          {
            style: { width: "5rem" },
            name: "",
            label: "test 9",
            children: (d, i) => "9",
          },
          {
            style: { width: "5rem" },
            name: "",
            label: "test 10",
            children: (d, i) => "10",
          },
          {
            style: { width: "5rem" },
            name: "",
            label: "test 11",
            children: (d, i) => "11",
          },
          {
            // name: 'operations',
            label: (
              <span>
                <em>Tooltip</em> <u>with</u> <b>HTML</b>
              </span>
            ),
            children: (d, i) => (
              <span>
                right {d.id} + {d.name}
              </span>
            ),
            fixed: "right",
            width: 100,
            style: {
              "background-color": "lightgreen",
            },
            tooltip: true,
          },
        ]}
        datas={datas}
      ></Table>
      <hr></hr>
      <button type="button" class="btn btn-light" onClick={toggleTableLoading}>
        Toggle
      </button>
      <Table
        loading={tableLoading()}
        loadingContent={
          <div class="d-flex flex-row" style={{ "align-items": "center" }}>
            <Spinner sm color="danger" classes={["m-1"]}></Spinner>
            <strong>Loading...</strong>
          </div>
        }
        responsive
        style={{ height: "200px" }}
        columns={[
          { type: "selection", style: { width: "1rem" } },
          { type: "index", style: { width: "1rem" } },
          { name: "id", label: "Id" },
          { name: "name", label: "Name" },
          {
            label: "mixin",
            children: (d, i) => (
              <span>
                {d.id} + {d.name}
              </span>
            ),
          },
        ]}
        datas={datas}
      ></Table>
    </div>
  );
};

export const TableDemoRoute: RouteDefinition = {
  path: "/table",
  component: TableDemo,
};

export default TableDemo;
